{% block sw_cms_layout_modal %}
<sw-modal
    class="sw-cms-layout-modal"
    variant="large"
    :title="$tc('sw-cms.components.cmsLayoutModal.modalTitle')"
    @modal-close="closeModal"
>

    {% block sw_cms_layout_modal_header %}
    <div class="sw-cms-layout-modal__header">

        {% block sw_cms_layout_modal_header_search %}
        <sw-simple-search-field
            v-model:value="term"
            class="sw-cms-layout-modal__header-search"
            :placeholder="$tc('sw-cms.general.placeholderSearchBar')"
            @search-term-change="onSearch"
        />
        {% endblock %}

        {% block sw_cms_layout_modal_header_sorting_container %}
        <div class="sw-cms-layout-modal__actions-sorting">

            {% block sw_cms_layout_modal_header_sorting_select %}
            <sw-sorting-select
                class="sw-cms-layout-modal__header-sorting-select"
                :sort-by="sortBy"
                :sort-direction="sortDirection"
                @sorting-changed="onSort"
            />
            {% endblock %}

            {% block sw_cms_layout_modal_header_view_toggle %}
            <div
                class="sw-cms-layout-modal__actions-mode"
                role="button"
                tabindex="0"
                @click="toggleListMode"
                @keydown.enter="toggleListMode"
            >

                {% block sw_cms_layout_modal_header_view_toogle_grid %}
                <mt-icon
                    v-if="listMode === 'grid'"
                    name="regular-view-normal"
                    size="16"
                />
                {% endblock %}

                {% block sw_cms_layout_modal_header_view_toogle_list %}
                <mt-icon
                    v-if="listMode === 'list'"
                    name="regular-view-grid"
                    size="16"
                />
                {% endblock %}

            </div>
            {% endblock %}

        </div>
        {% endblock %}

    </div>
    {% endblock %}

    {% block sw_cms_layout_modal_content %}
    <div class="sw-cms-layout-modal__content">

        {% block sw_cms_layout_modal_loader %}
        <sw-loader v-if="isLoading" />
        {% endblock %}

        {% block sw_cms_layout_modal_content_container %}
        <div v-else-if="listMode === 'grid'">
            <sw-container
                columns="repeat(auto-fill, minmax(250px, 1fr))"
                gap="24px"
            >

                {% block sw_cms_layout_modal_content_listing %}
                <div
                    v-for="(cmsPage, index) in pages"
                    :key="index"
                    :class="gridItemClasses(cmsPage.id, index)"
                >
                    {% block sw_cms_layout_modal_content_listing_item %}

                    {% block sw_cms_layout_modal_content_listing_item_checkbox %}
                    <mt-checkbox
                        :checked="cmsPage.id === selectedPageObject?.id"
                        class="sw-cms-layout-modal__content-checkbox"
                        @update:checked="selectItem(cmsPage)"
                    />
                    {% endblock %}

                    {% block sw_cms_layout_modal_content_listing_item_inner %}
                    <sw-cms-list-item
                        :page="cmsPage"
                        :is-default="[defaultProductId, defaultCategoryId].includes(cmsPage.id)"
                        @element-click="selectItem(cmsPage)"
                        @item-click="selectItem(cmsPage)"
                    />
                    {% endblock %}

                    {% endblock %}
                </div>
            </sw-container>

            {% block sw_cms_layout_modal_content_pagination %}
            <sw-pagination
                class="sw-cms-layout-modal__content-pagination"
                :page="page"
                :limit="limit"
                :total="total"
                :auto-hide="false"
                @page-change="onPageChange"
            />
            {% endblock %}

        </div>
        {% endblock %}

        <sw-data-grid
            v-else-if="listMode === 'list'"
            class="sw-cms-list__list-data-grid"
            identifier="sw-cms-list"
            :is-loading="isLoading"
            :limit="limit"
            :data-source="pages"
            :columns="columnConfig"
            :skeleton-item-amount="limit"
            :sort-by="sortBy"
            :sort-direction="sortDirection"
            :allow-inline-edit="false"
            :allow-column-edit="false"
            :show-settings="false"
            :show-actions="false"
            :show-selection="true"
            :maximum-select-items="1"
            :pre-selection="gridPreSelection"
            @selection-change="selectInGrid"
            @column-sort="onSortColumn"
        >

            {% block sw_cms_list_listing_list_data_grid_column_name %}
            <template #column-name="{ item }">
                <div
                    role="button"
                    tabindex="0"
                    @click="selectItem(item)"
                    @keydown.enter="selectItem(item)"
                >
                    {{ item.translated.name }}
                </div>
            </template>
            {% endblock %}

            {% block sw_cms_list_listing_list_data_grid_column_type %}
            <template #column-type="{ item }">
                {{ getPageType(item) }}
            </template>
            {% endblock %}

            {% block sw_cms_list_listing_list_data_grid_column_created %}
            <template #column-createdAt="{ item }">
                <sw-time-ago
                    :date="item.createdAt"
                    :date-time-format="{ month: '2-digit', day: '2-digit' }"
                />
            </template>
            {% endblock %}

            {% block sw_cms_list_listing_list_data_grid_column_updated %}
            <template #column-updatedAt="{ item }">
                <sw-time-ago
                    v-if="item.updatedAt"
                    :date="item.updatedAt"
                    :date-time-format="{ month: '2-digit', day: '2-digit' }"
                />
            </template>
            {% endblock %}

            {% block sw_cms_list_listing_list_data_grid_pagination %}
            <template #pagination>
                <sw-pagination
                    :page="page"
                    :limit="limit"
                    :total="total"
                    :auto-hide="false"
                    @page-change="onPageChange"
                />
            </template>
            {% endblock %}
        </sw-data-grid>
        {% endblock %}
    </div>
    {% endblock %}

    {% block sw_cms_layout_modal_footer %}
    <template #modal-footer>
        <mt-button
            variant="secondary"
            @click="closeModal"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        <mt-button
            variant="primary"
            class="sw-cms-layout-modal__button-select-layout"
            @click="selectLayout"
        >
            {{ $tc('sw-cms.components.cmsLayoutModal.actionConfirm') }}
        </mt-button>
    </template>
    {% endblock %}

</sw-modal>
{% endblock %}
